import { observer } from "mobx-react";
import { WeaSelect, WeaLocaleProvider } from 'ecCom';
import { toJS } from 'mobx';
import { Icon } from 'antd';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class Condition extends React.Component {
    componentDidMount() {
        const { store } = this.props;
        store.relatedLayout = this.container;
    }
    render() {
        const { store } = this.props;
        const { fieldOptions, nativeFields, conditionList, relatedLayout, name } = store;
        return (
            <div className="edc-ds-condition" ref={ref => this.container = ref}>
                <div className="edc-ds-condition-header">{getLabel('506100','关联表格')}</div>
                <div className="ant-row edc-ds-condition-group">
                    <div className="ant-col-12 text-elli" title={`数据集合：${name}`}>
                        {getLabel('506101','数据集合：')}{name}
                    </div>
                    <div className="ant-col-12 text-elli" title={`表格：${store.pageName}`}>
                        {getLabel('506102','表格：')}{store.pageName}
                    </div>
                </div>
                <div className="edc-ds-condition-content">

                    {
                        relatedLayout && conditionList.map(condition => (
                            <div className="edc-ds-condition-setting">
                                <WeaSelect
                                    layout={relatedLayout}
                                    value={condition.left}
                                    onChange={store.changeConditionLeft.bind(store, condition)}
                                    options={fieldOptions}
                                    style={{ width: 200, marginRight: 10 }}
                                />
                                <span>=</span>
                                <WeaSelect
                                    layout={relatedLayout}
                                    value={condition.right}
                                    onChange={store.changeConditionRight.bind(store, condition)}
                                    options={toJS(nativeFields)}
                                    style={{ width: 200, marginLeft: 10 }}
                                />
                                <Icon type="delete" className="edc-ds-condition-setting-delete" onClick={store.deleteCondition.bind(store, condition)}></Icon>
                            </div>
                        ))
                    }
                    <div className="edc-ds-condition-setting-opt">
                        <div onClick={store.addCondition} className="edc-ds-condition-setting-plus" style={{ marginRight: 10 }}>
                            <Icon type="plus" />
                            {getLabel('506103','添加')}
                        </div>
                        <div onClick={store.clearCondition} className="edc-ds-condition-setting-delete-all">{getLabel('506104','全部清除')}</div>
                    </div>
                </div>
            </div>
        )
    }
}